<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="日期节点">
        <el-date-picker
          v-model="date"
          align="right"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间">
        <el-select v-model="hourTime" placeholder="选择时间">
          <el-option label="08:00" value="08:00"></el-option>
          <el-option label="20:00" value="20:00"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预测间隔">
        <el-select v-model="predictionTime" placeholder="选择预测间隔" @change="handleChangePrediction">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 图片轮播 -->
    <el-container>
      <el-main style="display: flex; justify-content: center; align-items: center; height: 100%;">
        <el-carousel :autoplay="true" ref="carousel"
                     style="text-align: center; min-height: 600px; width: 100%;"
                     arrow="always" @change="handleCarouselChange">
          <el-carousel-item v-for="(image, index) in imageList" :key="index" :index="image"
                            style="height: 100%;">
            <el-image :src="prefix + image" alt="轮播图"
                      style="height: 100%; width: auto; object-fit: contain;" :preview-src-list="[prefix + image] ">
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "tem",
  data() {
    return {
      date: new Date(),  // 当前日期
      hourTime: this.getNearestTime(),  // 默认最近时间点（08:00 或 20:00）
      prefix: this.$config.ecImagePath + "ectmp/",  // 图片路径前缀
      imageList: [],  // 图片名称列表
      predictionTime: "24",
      options: [
        {label: '未来24小时', value: '24'},
        {label: '未来36小时', value: '36'},
        {label: '未来48小时', value: '48'},
        {label: '未来60小时', value: '60'},
        {label: '未来72小时', value: '72'}
      ]
    };
  },
  created() {
    this.generateImageList();
  },
  methods: {
    getNearestTime() {
      const currentHour = moment().hour();
      return currentHour < 8 || currentHour >= 20 ? '20:00' : '08:00';
    },
    // 走马灯切换事件
    handleCarouselChange(index) {
      // 提取imageList中的时间部分
      const hourDiff = this.calculateHourDifference(this.imageList[index]);
      this.predictionTime = hourDiff.toString();
    },
    // 提取名称中的小时差 方便绑定下拉框
    calculateHourDifference(imageName) {
      return imageName.substr(11, 3)

    },
    // 点击切换预测天数
    handleChangePrediction(newValue) {
      const index = this.options.findIndex(option => option.value === newValue);
      if (index !== -1) {
        this.$refs.carousel.setActiveItem(index);
      }
    },
    // 生成图片列表
    generateImageList() {
      const startDate = moment(this.date).format('YYYYMMDD');
      const startHour = this.hourTime.replace(':', '').substr(0, 2);  // 转为 08 或 20
      this.imageList = [];
      const dateList = [24, 36, 48, 60, 72]
      // 生成未来 1 到 8 天的图片名称
      for (let i = 1; i <= 5; i++) {
        this.imageList.push(`${startDate}${startHour}_0${dateList[i - 1]}.png`);
      }
    },
    // 重置为当天的日期
    resetQuery() {
      this.date = new Date();  // 绑定当前日期
      this.hourTime = this.getNearestTime();  // 设置默认时间
      this.predictionTime = "24";  // 设置预测间隔为1天
      this.generateImageList();  // 重新生成图片列表
    },
    handleQuery() {
      this.generateImageList();
    },
  },
}
</script>

<style scoped>
/deep/ .el-carousel__container {
  height: 600px;
}
</style>
